<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>jSlider Zero value test</title>
	
	<!-- bin/jquery.slider.min.css -->
	<link rel="stylesheet" href="../css/jslider.css" type="text/css">
	<link rel="stylesheet" href="../css/jslider.plastic.css" type="text/css">
  <!-- end -->

	<script type="text/javascript" src="../js/jquery-1.7.1.js"></script>
	
	<!-- bin/jquery.slider.min.js -->
	<script type="text/javascript" src="../js/jshashtable-2.1_src.js"></script>
	<script type="text/javascript" src="../js/jquery.numberformatter-1.2.3.js"></script>
	<script type="text/javascript" src="../js/tmpl.js"></script>
	<script type="text/javascript" src="../js/jquery.dependClass-0.1.js"></script>
	<script type="text/javascript" src="../js/draggable-0.1.js"></script>
	<script type="text/javascript" src="../js/jquery.slider.js"></script>
  <!-- end -->
	
	<style type="text/css" media="screen">
	  body { background: #EEF0F7; }
	 .layout { padding: 50px; font-family: Georgia, serif; }
	 .layout-slider { margin-bottom: 60px; width: 50%; }
	</style>

</head>
<body>
  
  <div class="layout">

    <div class="layout-slider" style="width: 100%">
      Slider <span style="display: inline-block; width: 400px; padding: 0 5px;"><input id="Slider1" type="slider" name="price" value="50" /></span>  in string
    </div>
    <script type="text/javascript" charset="utf-8">
      jQuery("#Slider1").slider({
        from: -50, 
        to: 200, 
        step: 5, 
        dimension: '%',
        skin: 'plastic',
        scale: ['-50', '|', '0', '|', '50', '|', '100', '|', '150', '|', '200']
      });
    </script>

    <div class="layout-slider" style="width: 100%">
      Slider <span style="display: inline-block; width: 400px; padding: 0 5px;"><input id="Slider2" type="slider" name="price" value="-0.5;0.5" /></span>  in string
    </div>
    <script type="text/javascript" charset="utf-8">
      jQuery("#Slider2").slider({
        from: -1, 
        to: 1, 
        step: 0.1,
        round: 1, 
        dimension: 'px',
        skin: 'plastic'
      });
    </script>

  </div>
</body>
</html>